<div class="modal-backdrop show"></div>

<div class="modal" style="overflow: auto;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Settings</h5>
                <button type="button" class="close" aria-label="Close" (click)="close()">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="wrapper">
                    <ul class="list-group flex-shrink-0">
                        <a class="list-group-item list-group-item-action" href="javascript:void(0)"
                           [routerLink]="['accounts']" routerLinkActive="list-group-item-warning">
                            Accounts
                        </a>
                        <a class="list-group-item list-group-item-action" href="javascript:void(0)"
                           [routerLink]="['general']" routerLinkActive="list-group-item-warning">
                            General
                        </a>
                        <a class="list-group-item list-group-item-action" href="javascript:void(0)"
                           [routerLink]="['storage']" routerLinkActive="list-group-item-warning">
                            Encryption
                        </a>
                    </ul>
                    <router-outlet></router-outlet>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-secondary" (click)="close()">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>
